<template>
  <div>
    <my-header></my-header>
    <form style="margin-top:55px" action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>
<van-notice-bar
  left-icon="volume-o"
  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>
    <!-- 轮播图 -->
    <van-swipe
    style="height:200px;">
      <van-swipe-item>
        <img style="width:100%;height:100%;" src="../assets/img/yx/元祖1.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img style="width:100%;height:100%;" src="../assets/img/ct/双黄白莲蓉月饼流心奶黄月饼3.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img style="width:100%;height:100%;" src="../assets/img/gt/宫廷国潮月饼3.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img style="width:100%;height:100%;" src="../assets/img/lx/奶黄流心月饼1.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img style="width:100%;height:100%;;" src="../assets/img/zx/美心1.jpg" alt="">
      </van-swipe-item>
      </van-swipe>
      <!-- 首页正文详情 -->
    <div class="qio">
      <div style="width:100%">
        <img style="width:100%" src="../assets/img/首页/tu1.png" alt="">
      </div>
      <div class="qio-1">
        <img style="width:100%" src="../assets/img/首页/tu2.png" alt="">
      </div>
      <div class="qio-2">
        <router-link to=""><img src="../assets/img/首页/tu3.png" alt=""></router-link>
        <router-link to=""><img src="../assets/img/首页/tu4.png" alt=""></router-link>
        <router-link to=""><img src="../assets/img/首页/tu5.png" alt=""></router-link>
      </div>
      <div class="qio-3">
        <img src="../assets/img/首页/tu6.png" alt="">
      </div>
      <div class="qio-4">
        <img src="../assets/img/首页/tu7.png" alt="">
        <img src="../assets/img/首页/tu8.png" alt="">
      </div>
      <div class="qio-5">
        <img src="../assets/img/首页/tu9.png" alt="">
      </div>
      <div class="qio-6">
        <img src="../assets/img/首页/tu10.png" alt="">
        </div>
        <div class="qio-6">
        <img src="../assets/img/首页/tu11.png" alt="">
        </div>
        <div class="qio-6">
        <img src="../assets/img/首页/tu12.png" alt="">
        </div>
        <div class="qio-7">
          <img src="../assets/img/首页/tu13.png" alt="">
        </div>
        <div class="qio-8">
          <router-link to=""><img src="../assets/img/首页/tu14.png" alt=""></router-link>
          <router-link to=""><img src="../assets/img/首页/tu15.png" alt=""></router-link>
          <router-link to=""><img src="../assets/img/首页/tu16.png" alt=""></router-link>
          <router-link to=""><img src="../assets/img/首页/tu17.png" alt=""></router-link>
        </div>
        
    </div>
    <my-flooer/>
  </div> 
</template>

<script>
import {Toast} from 'vant';
import MyHeader from '@/components/MyHeader.vue';
import MyFlooer from '@/components/MyFlooer.vue';
  export default {
  components: { MyHeader, MyFlooer },
    data() {
    return {
      value:'',
      tabSelected:this.$route.path.split('/').pop()
    };
  },
  activated(){
    //将tabSelected改为路由地址末尾字符串  index me
    this.tabSelected=this.$route.path.split('/').pop()
  },
  watch:{
    //监听tabSelected的变化，newval就是变量的新值 index /me
    //oldval 旧值
    tabSelected(newval,oldval){
      console.log(newval)
      if(newval==this.$route.path.split('/').pop()){
        return;  //避免出现路由重复跳转的问题
      }
    }
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
  },
  }
</script>
<style scoped src="../assets/css/index.css">

</style>
<style lang="scss" scoped>

</style>